{extend name="layout" /}
{block name="button"}
{if authCheck('node/nodeadd')}
&nbsp;<button type="button" onclick="add()" class="btn btn-mystyle btn-sm">添加顶级节点</button>
{/if}
{/block}
{block name="content"}
<div class="table-margin">
    <table class="table table-bordered table-header" id="list-table">
        <thead>
        <tr>
            <td>菜单名称</td>
            <td>路径</td>
            <td>排序</td>
            <td class="w20">操作</td>
        </tr>
        </thead>
        <tbody>
        {foreach name="nodes" item="vo"}
            <tr class="sub_0">
                <td id="{$vo.id}"><span class="glyphicon glyphicon-chevron-{$t==$vo.id?'down':'right'}"></span>&nbsp;&nbsp;{$vo['name']}</td>
                <td>{$vo['mca']}</td>
                <td><input type="text" onchange="updateSort('NodeModel','id','{$vo.id}','number',this)" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" size="4" value="{$vo.number}" class="form-control" style="width:80px" /></td>
                <td>
                    {if authCheck('node/nodeadd')}
                        <a href="javascript:;" onclick="add_child('{$vo.id}')">
                            <button class="btn btn-info btn-sm">添加子节点</button>
                        </a>
                    {/if}
                    {$vo['operate']}
                </td>
            </tr>
            {foreach name="$vo['children']" item="n"}
                <tr class="sub_{$n['pid']}" {$t==$n['pid']?'':'style="display:none;"'}>
                    <td id="{$n.id}">&emsp;<span class="glyphicon glyphicon-chevron-{$c==$n.id?'down':'right'}"></span>&nbsp;&nbsp;{$n['name']}</td>
                    <td>{$n['mca']}</td>
                    <td><input type="text" onchange="updateSort('NodeModel','id','{$n.id}','number',this)" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')"  size="4" value="{$n.number}" class="form-control" style="width:80px" /></td>
                    <td>
                        {if authCheck('node/nodeadd')}
                            <a href="javascript:;" onclick="add_child('{$n.id}')">
                                <button class="btn btn-inverse btn-sm">添加操作</button>
                            </a>
                        {/if}
                        {$n['operate']}
                    </td>
                </tr>
                {foreach name="$n['children']" item="a"}
                    <tr class="sub_{$a['pid']}" {$c==$a['pid']?'':'style="display:none;"'}>
                        <td>&emsp;&emsp;└─&nbsp;&nbsp;{$a['name']}</td>
                        <td>{$a['mca']}</td>
                        <td><input type="text" onchange="updateSort('NodeModel','id','{$a.id}','number',this)" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')"  size="4" value="{$a.number}" class="form-control" style="width:80px" /></td>
                        <td>{$a['operate']}</td>
                    </tr>
                {/foreach}
            {/foreach}
        {/foreach}
        </tbody>
    </table>
</div>
<div class="modal fade" id="bjy-add" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"> 添加菜单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="{:url('node/nodeAdd')}" method="post">
                    <input type="hidden" name="type_id" value="0">
                    <table class="table table-bordered contact-template-form">
                        <tbody><tr>
                            <td width="20%" align="right">菜单名：</td>
                            <td>
                                <input class="form-control" type="text" name="node_name" required="" aria-required="true">
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" align="right">路径：</td>
                            <td>
                                <input class="form-control" type="text" name="mca" required="" aria-required="true">
                                一级菜单：控制器 如：Nav
                                <br/>
                                二级菜单：控制器/方法 如：Nav/index
                            </td>
                        </tr>
                        <tr>
                            <th></th>
                            <td>
                                <input class="btn btn-primary text-white" type="submit" value="添加">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="bjy-edit" tabindex="-1" role="dialog" aria-labelledby="modaledit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="modaledit"> 修改菜单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="{:url('node/nodeEdit')}" method="post">
                    <input type="hidden" name="id">
                    <table class="table table-bordered contact-template-form">
                        <tbody><tr>
                            <td width="20%" align="right">菜单名：</td>
                            <td>
                                <input class="form-control" type="text" name="node_name" required="" aria-required="true">
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" align="right">路径：</td>
                            <td>
                                <input class="form-control" type="text" name="mca" required="" aria-required="true">
                                一级菜单：控制器 如：Nav
                                <br/>
                                二级菜单：控制器/方法 如：Nav/index
                            </td>
                        </tr>
                        <tr>
                            <th></th>
                            <td>
                                <input class="btn btn-primary" type="submit" value="修改">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var node_del_url = "{:url('node/nodeDel')}";
    // 添加菜单
    function add(){
        $("input[name='type_id']").val(0);
        $('#bjy-add').modal('show');
    }
    // 添加子菜单
    function add_child(pid){
        $("input[name='type_id']").val(pid);
        $('#bjy-add').modal('show');
    }
    // 编辑菜单
    function edit(id,name,mca){
        $("#bjy-edit input[name='id']").val(id);
        $("#bjy-edit input[name='node_name']").val(name);
        $("#bjy-edit input[name='mca']").val(mca);
        $('#bjy-edit').modal('show');
    }
    function delNode(id){
        if($(".sub_"+id).length > 0){
            layer.alert('该节点下有子节点，不可删除', {icon:2, title:'失败提示', closeBtn:0, anim:6});
            return false;
        }

        //询问框
        var index = layer.confirm('确定要删除该节点吗？', {
            icon: 3,
            title: '友情提示',
            btn: ['确定','取消'] //按钮
        }, function(){
            $.getJSON(node_del_url, {id : id},function(res){
                layer.close(index);
                if(1 == res.code){
                    if(t == id) t = 0;
                    if(c == id) c = 0;
                    location.href = "{:url('node/index')}?t="+t+'&c='+c;
                }else{
                    layer.alert(res.msg, {icon:2});
                }
            });
        }, function(){});
    }

    function slideNode(id){
        console.log(id);
        var trs = $(".sub_"+id);
        trs.slideToggle("fast");
        var cur = $('#'+id).children('span');
        if(cur.hasClass('glyphicon-chevron-right')){
            cur.attr('class', 'glyphicon glyphicon-chevron-down');
        }else{
            cur.attr('class', 'glyphicon glyphicon-chevron-right');
        }
    }

    var t = '{$t}',c = '{$c}';
    $(function () {
        $('.glyphicon').parent().click(function () {
            var id=$(this).attr("id");
            if($(this).parent().hasClass('sub_0')){
                if(t == '0'){
                    slideNode(id);t = id;//开 t = id
                }else if(t == id){
                    slideNode(id);t = 0;//关 t = 0
                    if(c != '0'){
                        slideNode(c);c = 0;//关 c = 0
                    }
                }else{
                    slideNode(t);//关
                    slideNode(id);t = id;//开 t = id
                    if(c != '0'){
                        slideNode(c);c = 0;//关
                    }
                }
            }else{
                if(c == '0'){
                    slideNode(id);c = id;//开 c = id
                }else if(c == id){
                    slideNode(id);c = 0;//关 c = 0
                }else{
                    slideNode(c);//关
                    slideNode(id);c = id;//开 c = id
                }
            }
        });

        // 添加节点
        var options = {
            success:showSuccess
        };

        $('#bjy-add form').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });

        // 编辑节点
        $('#bjy-edit form').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showSuccess(res){
        if(1 == res.code){
            if(res.data > 0){
                if($('#'+res.data).parent().hasClass('sub_0')){
                    t = res.data;c = 0;
                }else{
                    c = res.data;
                }
            }
            location.href = "{:url('node/index')}?t="+t+'&c='+c;
        }else{
            layer.alert(res.msg, {icon:2});
        }
    }
</script>
{/block}
